<template>
    <CommonContainer title="基础信息">
        <el-row :gutter="30">
            <el-col :span="21">
                <el-descriptions>
                    <el-descriptions-item label="模版名称">{{ detailInfo.templateName }}</el-descriptions-item>
                    <el-descriptions-item label="模版类型">
                        <dict-tag :options="dict.type.other_contract_template_type" :value="detailInfo.templateClassification"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="是否客户模版">
                        <dict-tag :options="dict.type.business_yes_no" :value="detailInfo.isCustomerTemplate"/>
                    </el-descriptions-item>
                    <template v-if="detailInfo.isCustomerTemplate==1">
                        <el-descriptions-item label="关联客户">
                            <div class="flex-row-center-sb" style="padding-right: 20px">
                                <div>{{ detailInfo.customerNames }}</div>
                                <div style="font-size: 14px;color:#1890FF; margin-left: 15px" @click="managerCustomer">管理客户</div>
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item label="开始生效额度申请">
                            {{detailInfo.applicationNo|filterNull}}
                        </el-descriptions-item>
                    </template>

                    <el-descriptions-item label="说明" :span="3">
                        {{ detailInfo.templateRemark }}
                    </el-descriptions-item>
                    <el-descriptions-item label="附件" :span="3">
                        <image-common disabled :up-type="2" v-model="detailInfo.templateAnnex"></image-common>
                    </el-descriptions-item>

                </el-descriptions>
            </el-col>
            <el-col :span="3" v-if="viewType==1 && detailInfo.isCustomerTemplate==2">
                <div class="suggestionInfo">
                    <div class="apprvalStatus flex-xy-center"
                         :class="[detailInfo.approvalStatus==0 ?'active0':'',detailInfo.approvalStatus==1 ?'active1':'',detailInfo.approvalStatus==3?'active2':'',detailInfo.approvalStatus==2?'active3':'']">
                        <span><dict-tag :options="dict.type.approval_status" :value="detailInfo.approvalStatus"/></span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </CommonContainer>
</template>

<script>
export default {
    components: {},
    dicts: ['other_contract_template_type','business_yes_no','approval_status'],
    props: {
        detailInfo: {
            type: Object,
            default: {}
        },
        viewType:{
            type:Number,
            default: 1
        }
    },
    data() {
        return {}
    },
    computed: {},
    methods: {
        managerCustomer(){
            this.$emit('managerCustomer')
        }
    },
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
.suggestionInfo {
    position: relative;

    .apprvalStatus {
        position: absolute;
        top: 10px;
        right: 40px;
        width: 80px;
        height: 80px;
        font-size: 14px;
        text-align: center;
        border-radius: 40px;

        &.active0 {
            color: #1890FF;
            border: #1890FF solid 1px;
        }

        &.active1 {
            color: orange;
            border: orange solid 1px;
        }

        &.active2 {
            color: red;
            border: red solid 1px;
        }

        &.active3 {
            color: green;
            border: green solid 1px;
        }
    }
}
</style>
